<template>
  <el-drawer v-model="drawer" :with-header="false" :size="pageSize" ref="drawerRef" :append-to-body="true" width="730px" @close="close" class="orderDetail">
    <div class="detail-content">
        <el-row justify="center">
            <h3>订单详情</h3>
        </el-row>
        <el-row justify="center" style="padding:5px 0;">
            <div class="row-cell"><span class="row-tips">订单编号/合同编号</span> {{form.orderSn || '-'}}</div>
            <div class="row-cell"><span class="row-tips">下单时间</span> {{form.createTime || '-'}}</div>
            <div class="row-cell"><span class="row-tips">关联客户</span> {{form.memberUsername || '-'}}</div>
            <div class="row-cell"><span class="row-tips">订单归属人</span> {{form.belongerId || '-'}}</div>
            <div class="row-cell"><span class="row-tips">订单来源</span> {{getSourceType(form.sourceType) || '-'}}</div>
        </el-row>
        <el-card style="margin-top:5px" :body-style="{ padding: `12px 10px` }">
            <div class="col-row">
                <div class="col-cell">
                    <el-row align="middle" style="margin-bottom:10px;">
                        <span class="col-label">订单总金额</span>
                        <span class="col-cell-data">￥{{form.totalAmount || 0}}</span>
                    </el-row>
                    <el-row align="middle" style="margin-bottom:10px;">
                        <span class="col-label">已收实际</span>
                        <!-- <span class="col-cell-data">￥{{(form.paymentTime != null ? form.payAmount : (form.rmoneyList.length > 0 ? calculateMoney(form.rmoneyList):0) ) || 0}}</span> -->
                        <span class="col-cell-data">￥{{form.receiveMoney}}</span>
                    </el-row>
                    <el-row align="middle">
                        <span class="col-label">应收金额</span>
                        <span v-if="form.rootIn == 6 || form.isErase == 1" class="col-cell-data">0</span>
                        <span v-else class="col-cell-data">￥{{form.payAmount - form.receiveMoney}}</span>
                        <el-tag v-if="form.isErase == 0 && form.receiveMoney > 0 && form.payAmount - form.receiveMoney > 0 " 
                            class="mx-1" size="small" type="warning" hit @click="eraseAmount">抹零</el-tag>
                        <el-tag v-if="form.isErase == 1" class="mx-1" size="small" type="info">已抹零</el-tag>
                    </el-row>
                </div>
                <div class="col-container">
                    <el-row justify="end" class="col-btn">
                        <div class="title-item" @click="openMaterial('file')">
                            <el-icon color="var(--next-bg-menuBar-light-1)" size="16px"><ele-Link /></el-icon>
                            <span class="tips">附件</span>
                        </div>
                    </el-row>
                    <el-row align="middle">
                        <span style="margin-right:10px">订单阶段</span>
                        <tree-line style="flex:1" :data="orderStage" :active="activeStage"></tree-line>
                    </el-row>
                </div>
            </div>
        </el-card>
        <el-row style="margin-top:15px">
            <el-card style="margin-right:10px;width:25%" :body-style="{ padding: `12px 10px` }">
                <h4>订单辅助信息</h4>
                <el-form size="small" label-width="100px" style="margin-top:10px">
                    <el-form-item label="结款方式">
                        <!-- {{form}} -->结款方式
                    </el-form-item>
                    <div v-if="serveForms.length > 0">
                        <el-form-item :label="item.label" v-for="(item,index) in serveForms" :key="index">
                            <span v-if="item.formType != 7">{{ item.value }}</span>
                            <el-tag v-else v-for="val in formTagSplit(item.value)" style="margin-left: 5px; margin-bottom: 10px;">
                                {{ val }}
                            </el-tag>
                        </el-form-item>
                    </div>
                    <div v-else>
                        <el-form-item label="要求发货日期">
                            {{form.requestDeliveryDate || '-'}}
                        </el-form-item>
                        <el-form-item label="发货状态">
                            {{form.delivery_time != null ? '已发货':'待发货'}} 
                        </el-form-item>
                        <el-form-item label="发货方式">
                            {{form.deliveryType || '-'}}
                        </el-form-item>
                        <el-form-item label="物流公司">
                            {{form.deliveryCompany || '-'}}
                            <el-link :underline="false" style="margin-left:10px;font-size:12px" type="primary">查看物流</el-link>
                        </el-form-item>
                        <div class="express">
                        <el-steps direction="vertical" v-for="(val,idx) in data" :key="idx" style="margin-left: 15px; margin-bottom: 50px; border-bottom: 1px solid #a8abb2;">
                            <span style="font-size: 17px; font-weight: bold; margin-bottom: 20px;">订单号：{{ val.deliverySn }}</span>
                            <el-step :title="returnExpressState(item)" v-for="(item,index) in val.deliveryInfo.data" :class="{ 'bigFont' : index === 0 }">
                                <template v-slot:icon>
                                    <el-icon>
                                    <component :is="returnExpressIcon(item)" />
                                    </el-icon>
                                </template>
                                <template v-slot:description>
                                    {{item.context}}
                                </template>
                            </el-step>
                        </el-steps>
                        </div>
                    </div>
                    
                </el-form>
            </el-card>
            <el-card style="flex:1" :body-style="{ padding: `12px 0` }">
                <el-row justify="space-between" align="middle" style="padding:0 10px">
                    <h4>订单明细</h4>
                    <el-row justify="end">
                        <el-button size="small" type="warning" @click="printPage"><el-icon><ele-Printer /></el-icon>打印</el-button>
                        <el-button size="small" type="primary" @click="editPage"><el-icon><ele-EditPen /></el-icon>编辑</el-button>
                    </el-row>
                </el-row>
                <div class="page-content" id="pageContainer">
                    <el-form ref="ruleRefForm" size="small" :model="form" :rules="rules" label-width="120px" label-position="right" style="1px solid var(--el-border-color-light)">
                        <el-form-item label="订单编号/合同编号" style="margin-bottom:0;border-bottom:1px solid var(--el-border-color-light)">{{form.orderSn || '-'}}</el-form-item>
                        <el-form-item label="客户名称" style="margin-bottom:0;border-bottom:1px solid var(--el-border-color-light)">{{form.customerName || '-'}}</el-form-item>
                        <el-row style="border-bottom:1px solid var(--el-border-color-light)">
                            <el-col :span="12" style="border-right:1px solid var(--el-border-color-light);">
                                <el-form-item label="收件人">{{form.receiverName || '-'}}</el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系电话" label-width="80px">{{form.receiverPhone || '-'}}</el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="收货地址" style="margin-bottom:0;border-bottom:1px solid var(--el-border-color-light)">{{form.receiverDetailAddress || '-'}}</el-form-item>
                        <el-row justify="center" style="border-bottom:1px solid var(--el-border-color-light);padding:5px 0">
                            <h4>订单明细</h4>
                        </el-row>
                        <el-table :data="productList" size="small">
                            <el-table-column label="产品编号" prop="id" width="120px" align="center"></el-table-column>
                            <el-table-column label="产品名称" prop="skuName" width="120px"></el-table-column>
                            <el-table-column label="规格/详情" prop="spuName"></el-table-column>
                            <el-table-column label="数量" prop="skuQuantity" align="center" width="60px"></el-table-column>
                            <el-table-column label="单价(元)" prop="skuPrice" align="center" width="65px"></el-table-column>
                            <el-table-column label="总价(元)" prop="realAmount" align="center" width="65px">
                                <template #default="scope">
                                    {{scope.row.skuPrice * scope.row.skuQuantity}}
                                </template>
                            </el-table-column>
                            <el-table-column label="折扣" prop="discount" align="center" width="60px"></el-table-column>
                            <el-table-column label="折后价" prop="realAmount" align="center" width="60px"></el-table-column>
                        </el-table>
                        <el-form-item label="合计" style="margin-bottom:0;border-bottom:1px solid var(--el-border-color-light);font-size:14px;color:var(--el-color-danger)">{{form.totalAmount || '-'}}</el-form-item>
                        <el-form-item label="大写" style="margin-bottom:0;border-bottom:1px solid var(--el-border-color-light);font-weight:bold;font-size:14px;">{{getCaps(form.totalAmount || 0)}}</el-form-item>
                        <el-form-item label="备注" style="margin-bottom:0;">{{form.note || '-'}}</el-form-item>
                    </el-form>
                </div>
            </el-card>
        </el-row>
        <el-divider>历史记录</el-divider>
        <h4>发货记录</h4>
        <el-table :data="logisticRecord" size="small" border style="margin-top:10px">
            <el-table-column label="物流单号" prop="deliverSn"></el-table-column>
            <el-table-column label="物流公司" prop="deliveryCompany"></el-table-column>
            <el-table-column label="发货日期" prop="deliveryTime"></el-table-column>
            <el-table-column label="实发产品详情" prop="deliverySkuList" class-name="order-goods" width="450" align="center">
                <template #header>
                    <el-row class="order-row-item order-border-none">
                        <el-col :span="10">产品名称</el-col>
                        <el-col :span="10">详情/规格</el-col>
                        <el-col :span="4">实发数量</el-col>
                    </el-row>
                </template>
                <template #default="scope">
                    <div style="flex:1;display:flex;flex-direction: column;">
                        <div v-for="(item, index) in scope.row.deliverySkuList" :key="index"
                            style="flex: 1;height:100%">
                            <el-row class="order-row-item" style="height:100%">
                                <el-col :span="10" class="col-text">{{ item.spuName }}</el-col>
                                <el-col :span="10" class="col-text">{{ item.skuName }}</el-col>
                                <el-col :span="4" class="col-text">{{ item.deliverNum }}</el-col>
                            </el-row>
                            <el-divider
                                style="margin: 0 -8px;width:calc(100% + 16px);border-color:var(--el-border-color-light)"
                                v-if="index < scope.row.deliverySkuList.length - 1" />
                        </div>
                    </div>
                </template>
            </el-table-column>
            <!-- <el-table-column label="实发数量" prop="deliverNum" width="80px"></el-table-column> -->
            <el-table-column label="签收日期" prop="receiveTime"></el-table-column>
        </el-table>
        <h4 style="margin-top:10px">回款记录</h4>
        <el-table :data="fundRecord" size="small" border style="margin-top:10px">
            <el-table-column label="回款类型" prop="note"></el-table-column>
            <el-table-column label="回款日期" prop="payTime"></el-table-column>
            <el-table-column label="回款金额(元)" prop="money"></el-table-column>
            <el-table-column label="付款渠道" prop="payType">
                <template #default="scope">
                    {{ payTypeDict[scope.row.payType] }}
                </template>
            </el-table-column>
            <el-table-column label="是否开票" prop="openInvoice">
                <template #default="scope">
                    {{ scope.row.openInvoice == null ?'不开发票':(scope.row.openInvoice == 0?'未开':'已开') }}
                </template>
            </el-table-column>
            <el-table-column label="开票信息" prop="ticketMsg"></el-table-column>

        </el-table>
        <h4 style="margin-top:10px">开票记录</h4>
        <el-table :data="ticketRecord" size="small" border style="margin-top:10px">
            <el-table-column label="开票日期" prop="createDate"></el-table-column>
            <el-table-column label="开票金额" prop="price"></el-table-column>
            <el-table-column label="付款方式" prop="payType"></el-table-column>
            <el-table-column label="是否开票" prop="billType"></el-table-column>
            <el-table-column label="开票信息" prop="note"></el-table-column>
        </el-table>
        <h4 style="margin-top:10px">售后记录</h4>
        <el-table :data="afterSaleRecord" size="small" border style="margin-top:10px">
            <el-table-column label="售后日期" prop="createTime"></el-table-column>
            <el-table-column label="售后类型" prop="returnType">
                <template #default="scope">
                    {{ afterSaleType[scope.row.type] }}
                </template>
            </el-table-column>
            <el-table-column label="售后原因" prop="reason"></el-table-column>
            <el-table-column label="处理方式" prop="disposalType"></el-table-column>
            <el-table-column label="完结日期" prop="handleTime"></el-table-column>
        </el-table>
    </div>
    <div id="showPrint" v-if="showImage">
        <img :src="printImage" alt="图片" />
    </div>
    <div class="tabs-list">
        <div class="close-btn" @click="close">
            <el-icon color="var(--next-color-white)" size="28px"><ele-CircleClose /></el-icon>
        </div>
    </div>
    <!-- <product-detail v-model:dialogDrawer="dialogProduct" @onSubmit="productSubmit"></product-detail> -->
    <material-dialog :title="materialTitle" v-model:dialogVisible="dialogMaterial" :default-list="materialList"></material-dialog>
    <create-order title="编辑订单" v-model:dialogDrawer="dialogEdit" v-model:defaultForm="form" v-model:isEdit="editStatus"></create-order>
  </el-drawer>
</template>
<script>
import { computed, reactive, toRefs, ref, nextTick, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import domtoimage from 'dom-to-image'
// import ProductDetail from './ProductDetail.vue'
import { useOrderApi } from '/@/api/order/index'
import TreeLine from '/@/components/treeLine/index.vue'
import { verifyNumberCnUppercase } from '/@/utils/toolsValidate'
import MaterialDialog from '/@/components/materialDialog/index.vue'
import CreateOrder from './CreateOrder.vue'
import { Check ,Van ,More ,User ,Location } from '@element-plus/icons-vue'

import { storeToRefs } from 'pinia';
import { orderModelStatus } from '/@/stores/order'

import api from '/@/api/commonApi'

export default {
    name: 'OrderDetail',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    emits: ['onDelete', 'update:dialogDrawer'],
    components: {
        // ProductDetail,
        TreeLine,
        MaterialDialog,
        CreateOrder
    },
    setup(props, context){
        const { dialogDrawer, defaultForm } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const form = computed({
            get: () => defaultForm.value,
            set: val => {
                context.emit('update:defaultForm', val)
            }
        })
        const ruleRefForm = ref()
        const orderApi = useOrderApi()
        const storeOrder = orderModelStatus() // 订单各类状态数据
        const state = reactive({
            data:[],
            rules: {},
            productList: [],
            logisticList: storeToRefs(storeOrder).deliveryType,
            payStatusList: storeToRefs(storeOrder).payStatus,
            payTypeList: storeToRefs(storeOrder).payType,
            logisticStatusList: storeToRefs(storeOrder).deliveryStatus,
            approvalStatusList: storeToRefs(storeOrder).approveState,
            safeTypeList: storeToRefs(storeOrder).storageType,
            sourceType: storeToRefs(storeOrder).sourceType,
            orderStatusList: [],
            orderStage: {
                common: [{
                    label: '待审批',
                    time: '',
                    value: 6
                },{
                    label: '已审批',
                    time: '',
                    value: 7
                },{
                    label: '待付款',
                    time: '',
                    value: 0,
                    isCircle: false,
                    percent: 0
                },{
                    label: '待发货',
                    time: '',
                    value: 1
                },{
                    label: '已发货',
                    time: '',
                    value: 2
                },{
                    label: '执行完毕',
                    time: '',
                    value: 3
                }] // 重发补发, 待退货, 退货完毕 => 取消订单
            },
            payTypeDict: {
                1: '支付宝',
                2: '微信',
                3: '银联',
                4: '货到付款'
            },
            activeStage: 0,
            logisticRecord: [],
            fundRecord: [],
            afterSaleRecord: [],
            ticketRecord: [],
            printImage: null,
            showImage: false,
            productId: null,
            dialogProduct: false,
            pageSize: '85%',
            materialTitle: '',
            dialogMaterial: false,
            materialList: [{
                label: '合同附件',
                num: 1,
                id: 1,
                children: []
            }],
            dialogEdit: false,
            editStatus: true,
            serveForms: [],
            afterSaleType: {
                1: '退款',
                2: '退货',
                3: '退货退款',
                4: '重发补发'
            }
        })
        // 获取订单来源
        const getSourceType = computed(() => {
            return type => {
                const result = state.sourceType.find(item => {
                    return item.id == type
                })
                return result ? result.name : '-'
            }
        })
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const getSize = () => {
            if(document.body.clientWidth <= 1400) {
                return '1220px'
            }else{
                return '85%'
            }
        }
        watch(() => dialogDrawer.value,
            val => {
                if(val) {
                    state.productList = []
                    state.pageSize = getSize() // modal 尺寸
                    getDetail()
                }
            }
        )
        // 编辑产品
        const editProduct = row => {
            state.productId = row.id
            state.dialogProduct = true
        }
        // 保存
        const submitForm = formEl => {
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    context.emit('update:dialogDrawer', false)
                }
            })
        }
        // 取消
        const cancelForm = formEl => {
            if (!formEl) return
            formEl.resetFields()
            context.emit('update:dialogDrawer', false)
        }
        // 编辑页面
        const editPage = () => {
            state.dialogEdit = true
            // context.emit('update:isEdit', true)
        }
        // 打印
        const printPage = () => {
            const content = document.querySelector('.page-content')
            state.showOptions = false
            if(state.printImage) {
                state.showImage = true
                setTimeout(() => {
                    window.print()
                    state.showImage = false
                }, 150)
                return
            }
            domtoimage.toBlob(content, {
                bgcolor: 'white',
                quality: 1
            }).then((dataUrl) => {
                state.printImage = URL.createObjectURL(dataUrl)
                state.showImage = true
                if(dataUrl) {
                    nextTick(async () => {
                        setTimeout(() => {
                            window.print()
                            state.showImage = false
                        }, 150)
                    })
                }
            })
        }
        // 获取详情
        const getDetail = () => {
            orderApi.getDetail(form.value.id).then(res => {
                state.productList = res.data.orderItemList
                state.serveForms = res.data.serveForms
                state.activeStage = res.data.rootIn == 6 || res.data.isErase == 1?3:(res.data.paymentTime == null ? 0 : res.data.status)
                state.logisticRecord = res.data.deliveryList
                state.fundRecord = res.data.rmoneyList
                state.afterSaleRecord = res.data.returnList
                state.materialList[0].children[0] = {
                    label: '合同附件',
                    url: res.data.contractFileUrl,
                    createTime: res.data.createTime,
                    auth: res.data.belongerId
                }
                // 设置状态
                state.data = res.data.deliveryInfoList

            })
        }
        // 获取大写
        const getCaps = computed(() => {
            return price => {
                return verifyNumberCnUppercase(price)
            }
        })
        // 统计金额
        const calculateMoney = list => {
            let money = 0;
            list.forEach(item => {
                money += item.money
            })
            return money;
        }

        const openMaterial = (type) => {
            if(type == 'doc'){
                state.materialTitle = '文档'
            }else{
                state.materialTitle = '附件'
            }
            state.dialogMaterial = true
        }
        const returnExpressIcon = (item) => {
          //他们都还不确定的 先写个方法凑合 不急着加字典
          var data = item.statusCode
          if(data == "1" || data == "101" || data == "102" || data == "103"){
            return "ele-More"
          }else if(data == "1001"){
            return "ele-Location"
          }else if(data == "0" || data == "1002" || data == "1003"){
            return "ele-Van"
          }else if(data == "5" || data == "501"){
            return "ele-User"
          }else if(data == "3" || data == "301" || data == "302" || data == "303"){
            return "ele-Check"
          }
        }
      const returnExpressState = (item) => {
        //他们都还不确定的 先写个方法凑合 不急着加字典
        var data = item.statusCode
        if(data == "1" || data == "101" || data == "102" || data == "103"){
          return "揽收中 " + item.time
        }else if(data == "0" || data == "1001" || data == "1002" || data == "1003"){
          return "运输中 " + item.time
        }else if(data == "5" || data == "501"){
          return "派送中 " + item.time
        }else if(data == "3" || data == "301" || data == "302" || data == "303"){
          return "已签收 " + item.time
        }
      }
      // 切割多表单值
      const formTagSplit = (val) => {
        return val.split(",")
      }
        // 抹零
        const eraseAmount = () => {
            ElMessageBox.confirm(
                `是否要抹零掉此订单(${form.value.orderSn})？`,
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    dangerouslyUseHTMLString: true,
                }
            ).then(() => {
                api.orderEraseMoney({
                    orderId: form.value.id,
                    orderSn: form.value.orderSn,
                    customerId: form.value.customerId,
                    payAmount: form.value.payAmount,
                    eraseMoney: Number(form.value.payAmount - form.value.receiveMoney).toFixed(2),
                    status: form.value.status == '0' ? 1 : 0
                }).then(res => {
                    form.value.isErase = 1
                    form.value.eraseMoney = Number(form.value.payAmount - form.value.receiveMoney).toFixed(2)
                    if (form.value.status == '0') {
                        form.value.status = 1
                    }
                    ElMessage.success("抹零成功")
                })
            }).catch(err => {

            })
        }

        return {
            ...toRefs(state),
            drawer,
            close,
            form,
            eraseAmount,
            editProduct,
            submitForm,
            cancelForm,
            ruleRefForm,
            editPage,
            printPage,
            getCaps,
            getSourceType,
            calculateMoney,
            openMaterial,
            formTagSplit,
            returnExpressState,
            returnExpressIcon
        }
    }
}
</script>

<style scoped lang="scss">
.express {
  max-height: 350px;
  overflow-y:scroll;
  .bigFont{

    :deep(.el-step__main){
      .el-step__title{
        font-size: 18px !important;
      }
    }
  }
}

.detail-content{
    padding: 10px;
    .row-cell{
        margin-right: 20px;
        font-size: 13px;
        min-width: 100px;
        .row-tips{
            color: var(--el-color-info);
            margin-right: 5px;
        }
        &:last-child{
            margin-right: 0;
        }
    }
    .col-row{
        display: flex;
        align-items: center;
        .col-container{
            margin-left: 20px;
            flex: 1;
            position: relative;
            .title-item{
                display: flex;
                align-items: center;
                cursor: pointer;
                font-size:12px;
                padding: 2px 6px;
                border-radius: 4px;
                border: 1px solid var(--el-color-primary-light-8);
                margin-left: 10px;
                span{
                    line-height: 20px;
                    display: inline-block;
                    margin-left: 8px;
                    color: var(--next-bg-menuBar-light-1);
                }
                .tips{
                    font-weight: bold;
                    color: var(--next-bg-menuBar-light-1);
                    margin-left: 2px;
                }
                &:hover{
                    background: var(--el-color-primary-light-8);
                    span, .el-icon{
                        color: var(--el-color-primary);
                    }
                }
            }
            .col-btn{
                position: absolute;
                top: -35px;
                right: 0;
            }
        }
        .col-cell{
            padding: 10px;
            border: 1px solid var(--el-color-primary-light-9);
            border-radius: 4px;
            .col-label{
                display: block;
                width: 60px;
                margin-right: 10px;
                text-align: right;
                font-size: 12px;
                color: var(--el-text-color-regular);
            }
            .col-cell-data{
                min-width: 100px;
                color: var(--el-color-danger);
            }
        }
    }
    .page-content{
        padding: 10px;
        :deep(.el-form){
            border: 1px solid var(--el-border-color-light);
            margin-top: 10px;
            .el-form-item__label{
                border-right: 1px solid var(--el-border-color-light);
                height: 34px !important;
                line-height: 34px;
            }
            .el-form-item__content{
                padding-left: 10px;
            }
            .el-table__cell{
                border-right: 1px solid var(--el-border-color-light);
                box-sizing: border-box;
                &:last-child{
                    border-right: none;
                }
            }
        }
    }
    :deep(.el-divider__text){
        background: var(--next-bg-main-color);
    }
}
#showPrint{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
        width: 723px;
    }
}
.tabs-list{
    position: absolute;
    top: 90px;
    left: -50px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    overflow: auto;
    max-height: 100%;
    .close-btn{
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background: var(--el-color-primary);
        padding: 5px 0;
        border-radius: 5px 0 0 5px;
    }
}
</style>
<style lang="scss">
.orderDetail{
    overflow: unset;
    position: fixed;
    background: var(--next-bg-main-color);
}

.order-goods .cell {
    padding: 0;
}

.el-table__body .order-goods .cell {
    min-height: 32px;
    display: flex;
    align-items: stretch;
    padding: 0;
}

.order-row-item {
    width: 100%;

    :deep(.el-col) {
        border-right: 1px solid var(--el-border-color-light);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        // &:last-child {
        //     border-right: none;
        // }

        &:first-child,
        &:nth-child(2) {
            text-align: left;
            justify-content: flex-start;
            padding-left: 8px;
        }
    }
}

.col-text{
    border-right: 1px solid var(--el-border-color-light) !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-tabs-label{
    position: relative;
}

.msg-quantity{
    position: absolute;
    top: -10px;
    right: -25px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    color: #FFFFFF;
    background: #E6A23C;
    display: flex;
    justify-content: center;
    align-items: center;
}

.click-open-text {
    color: #18A058;
}

.click-open-text:hover {
 cursor: pointer;
}

</style>
